<template>
    <div style="background-color: black">
      <div >
        <div style="position: absolute;left: 2rem;top: 1rem;z-index: 999999;">
          <van-col span="24" ><img class="imgaa" src="../../assets/返回 (1).png" @click="aaa"></van-col>
        </div>
        <div style="position: absolute;left: 19rem;top: 1rem;z-index: 999999;">
          <van-col span="24" ><img class="imgaa" src="../../assets/分享.png" @click="share('weixin')"></van-col>
        </div>
      </div>
<!--      <iframe style="width:100%;height:100%;" :src="this.listAll" frameborder="0" scrolling="no" autoplay = true id="bdIframe">-->
<!--      </iframe>-->
      <div align="center">
        <video autoplay="autoplay" :src="this.listAll" class="avatar" controls="controls"></video>
      </div>


<!--  <div style="background-color: black">-->

<!--  </div>-->

    </div>
</template>

<script>
  import { findAllZhengWuById,findAllPicById } from "@/api/commodity/strategy";
  import Vr from "./vr";
    export default {
        name: "strategy_shipin",
      components: {Vr},
      data(){
          return{

            player: null,
            playStatus: '',
            muteStatus: '',
            isMute: true,
            isPlay: false,
            width: '400', // 设置视频播放器的显示宽度（以像素为单位）
            height: '500', // 设置视频播放器的显示高度（以像素为单位）
            preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            autoplay: true,
            videoSrc:'',
            zhuti: null,
            lujing: null,
            buttons: [{
              title: '我的好友',
              extra: {
                scene: 'WXSceneSession'
              }
            },
              {
                title: '朋友圈',
                extra: {
                  scene: 'WXSceneTimeline'
                }
              },
            ],
            constructionStrategyId:0,
            listAll: '',
          }
      },

      mounted(){
        if(window.plus) {
          this.updateSerivces();
        }
        /**
         * iframe-宽高自适应显示
         */
        const oIframe = document.getElementById('bdIframe');
        const deviceWidth = document.documentElement.clientWidth;
        const deviceHeight = document.documentElement.clientHeight;
        oIframe.style.width = deviceWidth + 'px'; //数字是页面布局宽度差值
        oIframe.style.height = deviceHeight + 'px'; //数字是页面布局高度差
      },

      created() {
        this.constructionStrategyId =this.$route.query && this.$route.query.constructionStrategyId;
        this.getList();
      },

      methods:{

        aaa(){
          this.$router.push({
            path:"/strategy_index",
            query:{
              type: "a"
            }});
        },
        /**
         * 获取微信分享通道
         */
        updateSerivces() {
          let _this = this;
          plus.share.getServices(function (s) {
            _this.shares = {};
            for (var i in s) {
              var t = s[i];
              _this.shares[t.id] = t;
            }
            _this.sweixin = _this.shares['weixin'];
            _this.sqq = _this.shares['qq'];
            _this.sinaweibo = _this.shares['sinaweibo'];
          }, function (e) {
            plus.nativeUI.alert('获取分享服务列表失败：' + e.message);
          });
        },
        //第三方分享
        share(a) {
          let _this = this;

          if(a == 'weixin'){
            let msg = {
              type: 'web', //分享的内容的类型
              title: '淘小建自建房平台视频太赞了,分享给你',
              content: this.zhuti,
              thumbs: [this.lujing],
              href: this.listAll,
              extra: {
                scene: "WXSceneSession"
              } // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
            }
            plus.nativeUI.actionSheet({
              title: '分享到微信',
              cancel: '取消',
              buttons: _this.buttons,
            }, function (e) {
              (e.index > 0) && _this.sharePage(_this.sweixin, msg, _this.buttons[e.index - 1]);
            })
          }
        },

        /**
         * 触发分享
         */
        sharePage(srv, msg, button) {
          let _this = this;
          // plus.nativeUI.alert('分享操作：');
          if (!srv) {
            plus.nativeUI.alert('无效的分享服务！');
            return;
          }
          button && (msg.extra = button.extra);
          // 发送分享
          if (srv.authenticated) {
            // plus.nativeUI.alert('---已授权---');
            _this.doShare(srv, msg);
          } else {
            // plus.nativeUI.alert('---未授权---');
            srv.authorize(function () {
              _this.doShare(srv, msg);
            }, function (e) {
              plus.nativeUI.alert('认证授权失败：' + JSON.stringify(e));
            });
          }
        },
        /**
         * 开始分享
         */
        doShare(srv, msg) {
          let _this = this;
          srv.send(msg, function () {
            plus.nativeUI.alert('分享到"' + srv.description + '"成功！');
          }, function (e) {
            plus.nativeUI.alert('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));
          });
        },



        getList(){
          let that =this;
          findAllZhengWuById(that.constructionStrategyId).then(res=>{
            that.listAll = res.data.data.shipinUrl
            console.log("**************"+that.listAll)
            that.lujing = res.data.data.strategyZhutuUrl
            that.zhuti = res.data.data.strategyTheme

          })
        },


      },


    }
</script>

<style scoped>
  .avatar{
    /*padding: 10rem 0rem 15rem 0rem;*/
    width: 100%;
    height: 100%;
    position: absolute;left: 0rem;top: 0rem;
    background-color: black;
  }
  .imgaa{
    width: 1.5rem;
    height: 1.5rem;
  }
  .bg-video{
    display: flex;
    width:100%;
    /*height:auto;*/
    left:0px;
    top:0px;
    z-index: -1;
    vertical-align:bottom;display:block;
    position:absolute;
  }

  .v1{
    width: 100%;
    height: auto;
  }

  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 450;
    font-size: 1rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
